<template>
    <el-input   :class="['number-input', { 'number-input-left': isLeft}]"
                v-model="value"
                :clearable="clearable"
                @change="emit('change', $event)"
                @input="handleInput" @blur="handleBlur"
                :readonly="readonly"
    >
        <template #append v-if="unit">{{unit}}</template>
    </-input>
</template>
<script lang="ts" setup>
import { defineProps, watch, withDefaults, ref } from 'vue';
const props = withDefaults(defineProps<{
    modelValue: string | number | null,
    min?: number | string | null,
    max?: number | string | null,
    clearable?: boolean,
    precision?: number,
    fixPrecision?: boolean,
    unit?: string,
    isBlank?: boolean,
    readonly?: boolean,
    isLeft?: boolean,
}>(), {
    min: 0,
    precision: 0,
    fixPrecision: false,
    isBlank: false,
    readonly: false,
});

const value = ref<string|number>(props.modelValue);
const emit = defineEmits(['update:modelValue', 'change', 'blur']);


watch(() => props.modelValue, (n, o) => {
    if (n === null) {
        value.value = allowPlus('', props.precision);
        emit('update:modelValue', value.value);
        return;
    }
    if (typeof n !== 'undefined' && n.toString() !== o) {
        value.value = allowPlus(n.toString(), props.precision);
        emit('update:modelValue', value.value);
    } else {
        value.value = '';
        emit('update:modelValue', value.value);
    }
}, { immediate: true });

watch(() => value.value, (n, o) => {
    value.value = n;
    emit('update:modelValue', n);
});

function  allowPlus($event:string, fixed = 2) {
    $event = $event.replace(/\s/gi, '').replace(/[^\d.]/gi, ``);
    if ($event.length >= 2 && $event[0] === '0' && $event[1] !== '.') {
        $event = $event.substring(1, $event.length);
    }
    const points = $event.match(/\./gi) || [];
    if ($event[$event.length - 1] === '.' && points.length >= 2) {
        $event = $event.substring(0, $event.length - 1);
    }

    if ($event[0] === '.') {
        $event = $event.substring(0, 1);
    }
    if ($event.indexOf('.') >= 1) {
        const $eventArr = $event.split('.');
        $event = parseInt($eventArr[0], 10) + '.' + ($eventArr[1].substring(0, fixed) || '');
        if (props.precision === 0) {
            $event = parseInt($eventArr[0], 10);
        }
    } else {
        $event = parseInt($event, 10) + '';
        $event === 'NaN' && ($event = '');
    }
    return $event;
};

function handleInput($event:string) {
    value.value = allowPlus($event, props.precision);
    emit('update:modelValue', value.value);
}


function handleBlur() {
    if (props.isBlank && (value.value === '' || value.value === null)) {
        emit('blur');
        return;
    }
    if (value.value > props.max) {
        value.value = props.max;
        emit('blur');
        return;
    }
    if (value.value < props.min ) {
        value.value = props.min;
    }
    emit('blur');
}
</script>
<style lang="less" scoped>
.number-input {
    // ::v-deep .el-input__inner{
    //     text-align: center;
    // }
    /deep/ .md-input-group__append {
        padding: 0px 10px;
    }
    /deep/ .md-input__inner {
        text-align:center;
    }
}

.number-input-left {
    /deep/ .md-input__inner {
        text-align: left;
    }
}
</style>